<template>
  <div class="detail-container">
    <!-- 搜索框和logo -->
    <w-index-header></w-index-header>
    <!-- 导航条 -->
    <w-banner-bar :params="params"></w-banner-bar>
    <!-- 右侧功能菜单 -->
    <w-right-float></w-right-float>
    <!-- 商品图片及sku属性 -->
    <div class="goods-container">
      <!-- 面包屑导航 -->
      <div class="row">
        <div class="col-100">
          <div class="breadcrumb" v-if="goodsInfo.goodsName">
            <!-- 面包屑导航组件 -->
            <span class="cls pointer" v-show="goodsInfo.classNameOne" @click="getSearchResultById(goodsInfo.classIdOne, 1, goodsInfo.classNameOne)">{{goodsInfo.classNameOne}}</span>
            <span class="cls pointer" v-show="goodsInfo.classNameTwo" @click="getSearchResultById(goodsInfo.classIdTwo, 2, goodsInfo.classNameTwo)">{{goodsInfo.classNameTwo}}</span>
            <span class="cls pointer" v-show="goodsInfo.classNameThree" @click="getSearchResultById(goodsInfo.classIdThree, 3, goodsInfo.classNameThree)">{{goodsInfo.classNameThree}}</span>
            <span class="cls" v-text="goodsInfo.goodsName + ' ' + goodsInfo.goodsSerial"></span>
          </div>  
        </div>
      </div>
      <!-- 商品图片和商品基本信息 -->
      <div class="row">
        <!-- 商品下架标识 -->
        <div class="under" style="display: none;" v-show="goodsInfo.goodsStatus !== 0 && !$route.query.token"></div>
        <!-- 商品图片和收藏商品 -->
        <div class="col-30">
          <!-- 商品滑动组件 -->
          <magnifier v-if="showSku" :sku-img="skuImage" :photos="manifierImages"></magnifier>
          <!-- 收藏和分享组件 -->
          <div class="mt15">
            <collect :collected="goodsInfo.goodsWhetherCollect"></collect>
          </div>
        </div>
        <!-- 商品基本信息和sku代码 -->
        <div class="col-55">
          <h1>{{goodsInfo.goodsName}} {{goodsInfo.goodsSerial}}</h1>
          <!-- 伙拼剩余时间 -->
          <remain-time v-if="goodsInfo.goodsType == 1" :status="goodsInfo.goodsStatus" :time="goodsInfo.fightGoodsEndTime" :rule="crowdFundRules"></remain-time>
          <!-- 单价和批量组件 -->
          <price-lot :treid-prices="goodsInfo.tierdPriceAll" :count="goodsInfo.goodsSalenum"></price-lot>
          <!-- 计算运费 -->
          <div class="mt16">
            <delivery-area v-if="showSku" 
              :store-loc="goodsInfo.storeArea" 
              :goods-type="goodsInfo.goodsType" 
              :type0="goodsInfo.supplyMode" 
              :type1="goodsInfo.goodsNumType" 
              :time="goodsInfo.shipTime" 
              :end-time="goodsInfo.fightGoodsEndTime"></delivery-area>
          </div>
          <div class="mt20">
            <services :name="storeInfo.storeName"></services>
          </div>
          <!-- 商品sku属性 -->
          <div class="mt30" v-if="showSku">
            <goods-sku 
              :down="goodsInfo.fightGoodsEndTime < new Date().getTime() && (goodsInfo.goodsType != '0') || goodsInfo.goodsStatus !== 0"
              :type0="goodsInfo.supplyMode" 
              :type1="goodsInfo.goodsNumType" 
              :goods-type="goodsInfo.goodsType" 
              :tired-price="tiredPrice" 
              :sku-list="skuInfo" 
              :sku-rule="goodsInfo.goodsInvenDetail" 
              :error-color="errorColor" 
              :error-index="errorIndex"
              @selected-skus="selectSkuList" 
              @change-image="changeSkuImage" 
              @clear-error-color="errorColor={}"></goods-sku>
          </div>
          <!-- 特色服务 -->
          <feature :info="goodsInfo" v-if="goodsInfo.editService == 1"></feature>
          <!-- 合计组件，当点击加入购物车的时候  -->
          <div class="mt35" v-if="showSku" v-show="showAddUp">
            <add-up :number="number" :price="price" :selected-skus="selectedSkus"></add-up>
          </div>
          <!-- 加入购物车和立即购买按钮组 -->
          <div class="mt35">
            <buy-btns :status="showBuyButton" @add-to-cart="addToCart" @fight-now="buyNow" @buy-now="buyNow"></buy-btns>
          </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="col-15">
          <guess-you-like :id="goodsInfo.id" v-if="goodsInfo.id"></guess-you-like>
        </div>
      </div>
    </div>
    <!-- 店家信息和tab组件 -->
    <!-- 背景色 -->
    <div class="bgw">
      <div class="goods-container">
        <!-- 商品详细信息和商家信息 -->
        <div class="row mt70">
          <!-- 商家信息和热门商品 -->
          <div class="col-20">
            <!-- 店家信息 -->
            <seller @refress="handlerStoreInfo(storeInfo.storeId)" :store="storeInfo" :goods="this.goodsInfo"></seller>
            <!-- 热门商品 -->
            <div class="mt30">
              <hot-goods :hot-goods="hotGoodsList"></hot-goods>
            </div>
          </div>
          <!-- tab组件 -->
          <div class="col-80" v-if="showSku">
            <goods-tab :goods-info="goodsInfo"></goods-tab>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <!-- 当前不是采购商的提示信息 -->
    <div class="modal" v-show="showBuyer" style="display: none;">
      <div class="buyer-tip">
        <img src="../../assets/nullIcon/icon_upAlert.png">
        <!-- 立即升级的遮罩 -->
        <div class="up" @click="$router.push({path: '/my/extra/'})"></div>
        <!-- 关闭遮罩的关闭按钮 -->
        <div class="close" @click="showBuyer = false"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 滑动组件
import magnifier from './components/Manifier/Manifier'
// 导入收藏组件
import collect from './components/Collect'
// 价格批量组价
import priceLot from './components/PriceLot'
// 运费地址
import deliveryArea from './components/DeliveryArea'
// 商品sku属性组价
import goodsSku from './components/GoodsSku'
// 伙拼剩余时间组件
import remainTime from './components/RemainTime'
// 伙拼规则
import ruleBtns from './components/RuleBtns'
// 立即购买和加入购物车
import buyBtns from './components/BuyBtns'
// 商家信息
import seller from './components/Seller'
// 热门商品
import hotGoods from './components/HotGoods'
// tab组件
import goodsTab from './components/GoodsTab'
// 合计组件
import addUp from './components/AddUp'
// 服务
import services from './components/Services'
// 特色服务
import feature from './components/Feature'
// 猜你喜欢
import guessYouLike from './components/GuessYouLike'

// 获取接口对象
import { apiGoodsDetail, apiGoodsDetailRule, apiHotGoodsNew, apiStoreInfo, apiAddFootPrint, apiAddGoodsCart, apiUserRole, apiGoodsDraft } from '../../common/api'

// 引入滚动函数
import { windowScroll, session } from '../../common/util'

// 导入公共组件
import app from '../../main'

import { mapGetters, mapActions } from 'vuex'

// 信息
const MESSAGE = {
  NO_SELECTED_SKU_TO_CART: '请您先选择尺码',
  NO_SELECTED_SKU_TO_BUY: '请您先选择尺码',
  ADD_TO_CART_SUCCESS: '加入购物车成功',
  OUT_DATE: '伙拼已经结束，请等待下一期拼单',
  NO_LOGIN: '亲，请您先登录！',
  LOWER_GOODS_LIMIT: '亲，您选择的商品总数量低于最低起购量'
}

export default {
  components: {
    magnifier,
    collect,
    priceLot,
    goodsSku,
    remainTime,
    ruleBtns,
    buyBtns,
    seller,
    hotGoods,
    goodsTab,
    addUp,
    deliveryArea,
    services,
    feature,
    guessYouLike
  },
  data() {
    return {
      pathList: [
        {name: '首页', path: '/'},
        {name: '商品详情页', path: `/goods/detail/${this.$route.params.id}`}
      ],

      // 是否展示sku组件
      showSku: false,

      // 已经选中的sku
      selectedSkus: [],

      // 商品基本信息
      goodsInfo: {
        goodsStatus: 0
      },

      // 商品的sku属性
      skuInfo: [],

      // 热门商品列表
      hotGoodsList: [],

      // 店铺信息
      storeInfo: {},

      // 当前总数量
      number: 0,

      // 当前总价格
      price: 0,

      // 当前的阶梯价格
      tiredPrice: 0,

      // 伙拼规则
      crowdFundRules: [],

      // 展示需要升级的提示框
      showBuyer: false,

      // 错误的索引
      errorIndex: -1,

      // 头部导航条的参数
      params: {
        // 是否展示行业分类下拉
        show: 0,
        // 行业分类下拉展示后，是否显示背景颜色
        isTrue: 0
      },

      // sku属性上的商品图片
      skuImage: '',

      // 错误的颜色
      errorColor: {},

      // 倒计时对象
      timeoutFn: {},

      // 是否显示合计组件
      showAddUp: false
    }
  },
  created() {
    this.initPage()
  },
  // 监听$router,防止点击了不同商品，然后没有渲染页面数据
  watch: {
    '$route' (to, from) {
      this.initPage()
    }
  },
  methods: {
    ...mapActions(['fetchCartCount']),
    /**
     * 初始化页面及参数
     */
    initPage() {
      // 不展示sku属性
      this.showSku = false

      // 不展示合计组件
      this.showAddUp = false

      // 清空合计组件中保存的数据
      this.selectedSkus = []

      // 从路由中获取商品id
      let goodsId = this.$route.params.id

      // 如果商品id没有传过来，则不请求接口
      if (!goodsId) {
        return
      }

      // 如果路由中有token参数，则加载预览接口
      if (this.$route.query.token) {
        this.handlerGoodsPrevDetail(goodsId, this.$route.query.token)
        return
      }

      // 从接口获取商品基本信息，并处理
      this.handlerGoodsDetail(goodsId)

      // 从接口获取商品详情页的热门商品
      this.handlerHotGoods(goodsId)

      // 让页面跳转到顶部
      window.scroll(0, 0)
    },

    /**
     * 从预览接口中获取数据
     */
    handlerGoodsPrevDetail(goodsId, token) {
      // 初始化号码
      this.number = 0

      // 初始化价格
      this.price = 0

      // 加载接口数据
      apiGoodsDraft(goodsId, token).then(data => {
        // 商品基本信息
        this.goodsInfo = (data.goods || {})
        // 获取商品sku属性
        this.goodsInfo.tierdPriceAll = this.goodsInfo.tierdPrice
        // 遍历数据
        this.goodsInfo.tierdPriceAll.forEach((v, index) => {
          if (v.count.split('-').length == 1 && index < this.goodsInfo.tierdPriceAll.length - 1) {
            v.count += `-${Number(this.goodsInfo.tierdPriceAll[index + 1].count.split('-')[0]) - 1}`
          }
        })
        // 发货地址
        this.goodsInfo.storeArea = data.faHuoDiZhi

        // 给sku属性加上number字段
        if (this.goodsInfo.skuList && this.goodsInfo.skuList.length > 0) {
          this.goodsInfo.skuList.forEach((lmja) => {
            if (lmja.specpropertyList && lmja.specpropertyList.length > 0) {
              lmja.specpropertyList.forEach((size) => {
                this.$set(size, 'number', 0)
              })
            }
          })
        }

        // 赋值sku属性信息
        this.skuInfo = (this.goodsInfo.skuList || [])

        // 展示sku属性
        this.showSku = true

        // 将第一个阶梯价设置为初始价格
        if (this.goodsInfo.tierdPriceAll[0]) {
          this.tiredPrice = this.goodsInfo.tierdPriceAll[0].price
          this.goodsInfo.storePrice = this.goodsInfo.tierdPriceAll[0].price
        }

        // 获取店家信息
        this.handlerStoreInfo(this.goodsInfo.storeId || this.goodsInfo.goodsStoreId)
      })
    },

    /**
     * 通过点击当前商品的分类展示搜索结果页面
     *
     * @param { Number } id       分类的id
     * @param { Number } gcIndex  当前是第几个分类
     * @param { String } gcName   分类名称
     */
    getSearchResultById(id, gcIndex, gcName) {
      // 如果点击的是一级分类
      if (gcIndex == 1) {
        // 打开搜索结果页面
        window.open(`/search/goods?type=goods&gs=${this.goodsInfo.classIdOne}`)
        return
      }
      // 如果点击的是二级分类
      if (gcIndex == 2) {
        // 打开搜索结果页面
        window.open(`/search/goods?type=goods&gfh=${this.goodsInfo.classIdTwo}`)
        return
      }
      // 打开搜索结果页面
      window.open(`/search/goods?type=goods&gft=${this.goodsInfo.classIdThree}&key=${gcName}`)
    },

    /**
     * 改变sku中的商品图片
     *
     * @param { String } imgPath sku中附带的商品图片
     */
    changeSkuImage(imgPath) {
      // 商品图片不存在，则不操作
      if (!imgPath) {
        return
      }
      this.skuImage = imgPath
    },

    /**
     * 获取并处理商品基本信息
     *
     * @param { String } goodsId 商品id
     */
    handlerGoodsDetail(goodsId) {
      // 初始化号码
      this.number = 0

      // 初始化价格
      this.price = 0

      // 请求商品基本信息接口接口
      // 赋值基本信息
      apiGoodsDetail(goodsId, this.token).then((data) => {
        // 商品基本信息
        this.goodsInfo = (data.goods || {})
        // 判断商品是普通商品，则fightGoodsEndTime强制为为undefined
        if (this.goodsInfo.goodsType == '0') {
          this.goodsInfo.fightGoodsEndTime = undefined
        }
        // 给sku属性加上number字段
        if (data.lmja && data.lmja.length > 0) {
          data.lmja.forEach((lmja) => {
            if (lmja.specpropertyList && lmja.specpropertyList.length > 0) {
              lmja.specpropertyList.forEach((size) => {
                this.$set(size, 'number', 0)
              })
            }
          })
        }

        // 赋值sku属性信息
        this.skuInfo = (data.lmja || [])

        // 展示sku属性
        this.showSku = true

        // 将第一个阶梯价设置为初始价格
        if (this.goodsInfo.tierdPriceAll[0]) {
          this.tiredPrice = this.goodsInfo.tierdPriceAll[0].price
          this.goodsInfo.storePrice = this.goodsInfo.tierdPriceAll[0].price
        }

        // 遍历数据
        this.goodsInfo.tierdPriceAll.forEach((v, index) => {
          if (v.count.split('-').length == 1 && index < this.goodsInfo.tierdPriceAll.length - 1) {
            v.count += `-${Number(this.goodsInfo.tierdPriceAll[index + 1].count.split('-')[0]) - 1}`
          }
        })

        // 从接口获取商品的众筹规则
        this.handlerGoodsDetailRule(goodsId)

        // 获取店家信息
        this.handlerStoreInfo(this.goodsInfo.storeId)

        // 将当前商品加入我的足迹中
        this.handlerFooterPrint(goodsId, this.goodsInfo.storeId)
      })
    },

    /**
     * 获取商品的众筹拼单规则
     *
     * @param { String } goodsId 商品id
     */
    handlerGoodsDetailRule(goodsId) {
      // 请求商品的众筹拼单规则
      apiGoodsDetailRule(goodsId).then((data) => {
        this.crowdFundRules = data.crowdFundRules

        // 遍历数据，将规则转换成json对象
        if (this.crowdFundRules && this.crowdFundRules.length > 0) {
          this.crowdFundRules.forEach((v) => {
            // 拼单规则数据
            v.checkOutDetail = this.goodsInfo.goodsInvenDetail
            v.checkOutCount = (v.checkOutCount || 0)

            // 遍历SKU的颜色数据
            if (v.checkOutDetail && v.checkOutDetail.length > 0) {
              v.checkOutDetail.forEach((v1) => {
                v1.checkOutCount = 0

                // 将尺码数据累加到颜色上去
                if (v1.specpropertyList && v1.specpropertyList.length > 0) {
                  v1.specpropertyList.forEach((v2) => {
                    v1.checkOutCount += v2.checkOutCount
                  })
                }
              })
            }
          })
        }
      })
    },

    /**
     * 获取并处理商品详情页的热门商品
     *
     * @param  {String} goodsId 商品id
     */
    handlerHotGoods(goodsId) {
      // 首先清空热门商品的数据
      this.hotGoodsList = []
      apiHotGoodsNew().then((data) => {
        // 如果没有获取商品列表
        if (!data.BoutiqueGoods) {
          this.hotGoodsList = []
          return
        }
        this.hotGoodsList = this.hotGoodsList.concat(data.BoutiqueGoods)
      })
    },

    /**
     * 获取当前产品的厂家信息
     *
     * @param  {String} storeId 从商品详情页获取的厂家id
     */
    handlerStoreInfo(storeId) {
      // 如果并没有获取到厂家的id，则不请求接口
      if (!storeId && storeId != 0) {
        return
      }

      // 获取接口数据
      apiStoreInfo(storeId, this.token).then((data) => {
        this.storeInfo = data
        this.$store.commit('updateStoreInfo', this.storeInfo)
      })
    },

    /**
     * 新增我的足迹信息
     *
     * @param { String } goodsId 商品id
     * @param { String } storeId 店铺id
     */
    handlerFooterPrint(goodsId, storeId) {
      // 如果没有登录，则不请求添加足迹接口
      if (!this.token) {
        return
      }

      // 请求接口，将当前商家店铺加入我的足迹中
      apiAddFootPrint(goodsId, '' + storeId, this.token).then((data) => {})
    },

    /**
     * 将选中的sku保存到全局作用域中
     *
     * @param  { Array } data 在sku组件中点击sku列表
     */
    selectSkuList(data) {
      // 总数量
      let totalCount = 0

      // 便利数据，累加总数量
      data.forEach((v) => {
        if (v.specpropertyList && v.specpropertyList.length > 0) {
          v.specpropertyList.forEach((v1) => {
            totalCount += v1.number
          })
        }
      })

      // 如果总数量是0，则不追加（第一次点击）
      if (this.selectedSkus.length == 0 && totalCount == 0) {
        return
      }

      // 展示合计组件
      this.showAddUp = true

      // 选中的sku
      this.selectedSkus = data

      // 获取价格和数量
      this.getNumberAndPrice()
    },

    /**
     * 获取价格和数量
     */
    getNumberAndPrice() {
      // 全部数值
      this.number = 0

      // 累加数量和价格
      this.selectedSkus.forEach((v1) => {
        // 设置已经选中颜色数量
        v1.number = 0

        // 遍历所有的尺码数据
        if (v1.specpropertyList && v1.specpropertyList.length > 0) {
          v1.specpropertyList.forEach((v2) => {
            // 黑色尺码的数量
            v1.number += v2.number

            // 累加所有sku的数量
            this.number += v2.number
          })
        }
      })

      // 获取阶梯价
      let tiredPrice = this.goodsInfo.tierdPriceAll

      // 如果没有阶梯价，则使用默认价格
      if (!tiredPrice || tiredPrice.length == 0) {
        this.tiredPrice = this.goodsInfo.storePrice || this.goodsInfo.factoryPrice
        this.price = Number(this.tiredPrice) * this.number
        return
      }

      // 区间价格的开始数量
      let startNumber = 0

      // 区间价格的结束数量
      let endNumber = 0

      // 是否在阶梯价中
      let inTirePrice = false

      // 取出阶梯价区间值，将价格累加区间值
      tiredPrice.forEach((v) => {
        if (v && v.count) {
          startNumber = Number(v.count.split('-')[0])
          endNumber = Number(v.count.split('-')[1])

          // 如果在区间之间，则累加价格
          if (startNumber <= this.number && (endNumber >= this.number || isNaN(endNumber))) {
            inTirePrice = true
            this.tiredPrice = v.price
            this.price = Number(v.price) * this.number
          }
        }
      })

      // 如果商品不在阶梯价中，则使用商品原价
      if (!inTirePrice) {
        this.tiredPrice = this.goodsInfo.storePrice || this.goodsInfo.factoryPrice
        this.price = Number(this.tiredPrice) * this.number
      }

      // 如果数值为0，则取最低价格
      if (this.number == 0) {
        this.tiredPrice = tiredPrice[0].price
      }
    },

    /**
     * 验证商品列表
     */
    validateFightTime() {
      // 如果当前是普通商品，则校验通过
      if (this.goodsInfo.goodsType == 0) {
        return true
      }
      // 商品超过拼单时间
      if (this.goodsInfo.fightGoodsEndTime < new Date().getTime()) {
        app.$toast(MESSAGE.OUT_DATE)
        return false
      }
      this.fetchCartCount(this.token)
      return true
    },

    /**
     * 加入购物车
     */
    addToCart() {
      // 如果商品被下架了
      if (this.goodsInfo.goodsStatus !== 0) {
        return
      }

      // 如果获取token失败，则重新登录
      if (!this.token) {
        // 请求登录
        this.$toast(MESSAGE.NO_LOGIN, () => {
          this.$router.push(`/login?redirect=${encodeURIComponent(this.$route.fullPath)}`)
        })
        return
      }
      // 验证结算时间失败，则弹框提示
      if (!this.validateFightTime()) {
        return
      }

      // 每个尺码是否符合最低起购量
      if (!this.sizeLowerDelivery()) {
        return
      }

      // 选中的sku属性,拼接成的报文
      let data = {
        accessToken: this.token,
        storeId: ('' + this.goodsInfo.storeId),
        goodsList: [],
        supplyMode: this.goodsInfo.goodsType == 0 ? this.goodsInfo.supplyMode : '',
        goodsNumType: this.goodsInfo.goodsType == 1 ? this.goodsInfo.goodsNumType : '',
        goodsType: this.goodsInfo.goodsType // 商品类型字段，0表示普通，1表示拼单商品
      }

      // 遍历sku
      this.selectedSkus.forEach((v) => {
        if (v.specpropertyList && v.specpropertyList.length > 0) {
          v.specpropertyList.forEach((v1) => {
            // 将选择了数量的sku加上去
            if (v1.number > 0) {
              data.goodsList.push({
                goodsId: this.$route.params.id,
                goodsNumType: this.goodsInfo.goodsNumType,
                cartGsp: [v.specpropertyId, v1.specpropertyId].join(','),
                goodsSpecName: ['顔色', '尺码'],
                goodsSpecContent: [v.specpropertyName, v1.specpropertyName],
                count: v1.number
              })
            }
          })
        }
      })

      // 没有选择商品的sku属性，则弹框提示并抛出
      if (!data.goodsList || data.goodsList.length == 0) {
        app.$toast(MESSAGE.NO_SELECTED_SKU_TO_CART)
        return
      }
      // 查询用户角色
      apiUserRole(this.token).then((status) => {
        // 如果当前不是供应商
        // if (status.role == 1) {
        //   this.showBuyer = true
        //   return
        // }

        // // 如果是供应商
        // if (status.role == 3) {
        //   this.$toast('抱歉！供应商无法购买商品')
        //   return
        // }

        // 请求接口数据
        apiAddGoodsCart(data).then((v) => {
          // 如果当前不是采购商
          if (v.code == '300') {
            this.showBuyer = true
            return
          }
          app.$toast(MESSAGE.ADD_TO_CART_SUCCESS, () => {
            // 提交成功后重新获取购物车总数量
            this.fetchCartCount(this.token)
          })
        })
      })
    },

    /**
     * 是否是最低起购量，尺码是否是最低起订量
     *
     * @param { Number } type 当前类型 1：立即购买 0：立即拼单
     */
    isLowDelivery(type) {
      // 如果当前不是立即购买，则不校验
      if (type != 1) {
        return true
      }

      // 是否通过校验
      let passValidate = true
      let totalCount = 0

      // 遍历数据
      this.skuInfo.forEach((v) => {
        // 累加选择的数量
        totalCount += v.number

        // 如果当前选择的数量小于最低起购量
        if (passValidate && v.number < Number(v.specpropertyCrowdSum || '0') && v.number > 0 && this.goodsInfo.goodsType == 1) {
          // 保存错误的颜色id
          this.errorColor = v

          // 提示哪个规格没有选择
          this.$toast(`${v.specpropertyName}最低起订${v.specpropertyCrowdSum}件哦！`)

          // 设置校验失败
          passValidate = false
          return false
        }
      })

      // 如果有拼单规则，则判断所有颜色的最低起购量
      if (passValidate && this.crowdFundRules && this.crowdFundRules.length > 0 && this.goodsInfo.goodsType == 1) {
        // 如果小于商品组合的最低起购量
        if (this.crowdFundRules[0].crowdfundingCount > totalCount) {
          this.$toast(`商品单独订购，最低需要${this.crowdFundRules[0].crowdfundingCount}件哦！`)
          passValidate = false
        }
      }
      return passValidate
    },

    /**
     * 尺码是最低起购量
     */
    sizeLowerDelivery() {
      // 是否通过校验
      let passValidate = true
      let totalCount = 0

      // 便利数据
      this.skuInfo.forEach((v) => {
        // 累加选择的数量
        totalCount += v.number

        if (v.specpropertyList && v.specpropertyList.length > 0) {
          v.specpropertyList.forEach((v1, index) => {
            // 如果当前选择的数量小于最低起购量
            if (passValidate && v1.number < Number(v1.specpropertySmallCount || '0') && v1.number > 0) {
              // 保存错误的颜色id
              this.errorColor = v
              this.errorIndex = index

              // 隔1.5s清空一下错误的索引
              this.timeoutFn = setTimeout(() => {
                // 将错误的索引变成-1，方便下一次使用
                this.errorIndex = -1

                // 清空定时器
                clearTimeout(this.timeoutFn)
              }, 1500)

              // 设置校验失败
              passValidate = false
              return false
            }
          })
        }
      })

      // 如果当前是没有选择数量
      if (totalCount == 0) {
        this.$toast(MESSAGE.NO_SELECTED_SKU_TO_BUY)
        return false
      }

      // 如果是普通商品，且选择的总数量小于最低购买量
      if (this.goodsInfo.goodsLimit && this.goodsInfo.goodsLimit > totalCount && this.goodsInfo.goodsType == 0) {
        this.$toast(`${MESSAGE.LOWER_GOODS_LIMIT}（${this.goodsInfo.goodsLimit}件）`)
        passValidate = false
      }
      return passValidate
    },

    /**
     * 立即购买
     *
     * @param { Number } type 当前类型 1：立即购买 0：立即拼单
     */
    buyNow(type) {
      // debugger
      // 如果商品被下架了
      if (this.goodsInfo.goodsStatus !== 0) {
        return
      }

      // 如果获取token失败，则重新登录
      if (!this.token) {
        // 请求登录
        this.$toast(MESSAGE.NO_LOGIN, () => {
          this.$router.push(`/login?redirect=${encodeURIComponent(this.$route.fullPath)}`)
        })
        return
      }
      // 验证结算时间失败，则弹框提示
      if (!this.validateFightTime()) {
        return
      }

      // 每个尺码是否符合最低起购量
      if (!this.sizeLowerDelivery()) {
        return
      }

      // 判断是否是最低起购量
      if (!this.isLowDelivery(type)) {
        return
      }

      // 如果没有选择sku属性，则不让进入下一步
      if (!this.selectedSkus || this.selectedSkus.length == 0) {
        this.$toast(MESSAGE.NO_SELECTED_SKU_TO_BUY)
        return
      }

      // 查看用户角色，如果不是供应商，在弹框提示，要求升级
      apiUserRole(this.token).then((status) => {
        // 如果当前不是供应商
        // if (status.role == 1) {
        //   this.showBuyer = true
        //   return
        // }

        // // 如果是供应商
        // if (status.role == 3) {
        //   this.$toast('抱歉！供应商无法购买商品')
        //   return
        // }

        // 选中的sku属性,拼接成的报文
        let data = {
          accessToken: this.token,
          orderType: 'web',
          payType: 'online',
          invoiceType: 0,
          invoice: '',
          transport: '快递',
          orderForm: 0,
          receiverAddrId: '',
          supplyMode: this.goodsInfo.goodsType == 0 ? this.goodsInfo.supplyMode : '',
          // 只会生成一种订单
          // goodsList
          storeVoList: [
            {
              goodsList: [
                {
                  goodsId: '' + this.$route.params.id,
                  goodsName: this.goodsInfo.goodsName,
                  goodsMainPhotoPath: this.goodsInfo.goodsMainPhoto,
                  goodsGsp: [],
                  goodsType: this.goodsInfo.goodsType, // 商品类型字段，0表示普通，1表示拼单商品
                  goodsNumType: this.goodsInfo.goodsType == 1 ? this.goodsInfo.goodsNumType : ''
                }
              ],
              storeId: '' + this.goodsInfo.storeId,
              storeName: this.storeInfo.storeName,
              shipPrice: '',
              totalCount: 0,
              totalPrice: 0,
              msg: ''
            }
          ]
        }

        // 遍历sku
        this.selectedSkus.forEach((v) => {
          if (v.specpropertyList && v.specpropertyList.length > 0) {
            v.specpropertyList.forEach((v1) => {
              // 累加选择了数量的sku
              if (v1.number > 0) {
                // 配置sku属性
                data.storeVoList[0].goodsList[0].goodsGsp.push({
                  cartGsp: [v.specpropertyId, v1.specpropertyId].join(','),
                  count: '' + v1.number,
                  singlePrice: this.tiredPrice,
                  singleTotalPrice: this.tiredPrice * v1.number,
                  specColor: '颜色:' + v.specpropertyName,
                  specSize: '尺码:' + v1.specpropertyName,
                  goodsSpecName: ['顔色', '尺码'],
                  goodsSpecContent: [v.specpropertyName, v1.specpropertyName]
                })

                // 配置当前商品选择的数量
                data.storeVoList[0].totalCount += v1.number
              }
            })
          }
        })

        // 配置当前商品的总价格
        data.storeVoList[0].totalPrice = data.storeVoList[0].totalCount * this.tiredPrice

        // 将数据放到确定订单数据中
        session.set('confirm-order-info', data)

        // 跳转到确认订单页面
        this.$router.push(`/placeorder?redirect=/goods/detail/${this.$route.params.id}`)
      })
    }
  },
  computed: {
    ...mapGetters(['token']),

    // 是否展示商品
    showBuyButton() {
      // 如果伙拼时间小于当前时间，则返回1，不展示商品的购买按钮
      if (this.goodsInfo.fightGoodsEndTime < new Date().getTime()) {
        return 1
      }
      // 返回商品的状态
      return this.goodsInfo.goodsStatus
    },

    // 轮播图列表
    manifierImages() {
      // 如果有商品轮播图
      if (this.goodsInfo.goodsInfoPhotePath || this.goodsInfo.figure) {
        return this.goodsInfo.goodsInfoPhotePath || this.goodsInfo.figure
      }
      return []
    }
  },
  /**
   * 路由跳转后清除滚动事件
   */
  deactivated() {
    windowScroll.destroy()
  }
}
</script>

<style lang="scss" scoped>
.clear {
  clear: both;
}
.cls {
  color: #000000;
  font-size: 18px;

  &:last-child:after {
    display: none;
  }

  &:after {
    display: inline-block;
    content: '>';
    margin-left: 10px; 
  }
}
.bgw {
  background-color: #FFFFFF;
}
.col-15 {
  float: left;
  width: 170px;
  padding: 0px 15px;
}
.col-20 {
  float: left;
  width: 220px;
  padding: 0px 15px;
}
.col-30 {
  float: left;
  width: 480px;
  padding: 0px 15px;
}
.col-40 {
  float: left;
  width: 40%;
  padding: 0px 15px;
}
.col-60 {
  float: left;
  width: 60%;
  padding: 0px 15px;
}
.col-55 {
  float: left;
  width: calc(100% - 650px);
  padding: 0px 15px;
  h1{
    color: #141414;
    font-weight: 600;
  }
}
.col-70 {
  float: left;
  width: calc(100% - 480px);
  padding: 0px 15px;
}
.col-80 {
  float: left;
  width: calc(100% - 220px);
  padding: 0px 15px;
}
.col-100 {
  float: left;
  width: 100%;
  padding: 0px 15px;
}
.detail-container {
  margin-bottom: -45px;
  padding-bottom: 45px;
  font-size: 12px;
  background-color: #FFFFFF;
  .goods-container {
    font-size: 14px;
    width: 1230px;
    margin: 0 auto;
  }
}
.breadcrumb {
  margin-top: 24px;
  margin-bottom: 14px;

  span {
    color: #838383;
    font-size: 12px;
  }
}
.pd-20 {
  padding-top: 20px;
}
h1 {
  color: #000000;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 12px;
  margin-top: 5px;
}
.title {
  margin-left: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt16 {
  margin-top: 16px;
}
.mt20 {
  margin-top: 20px;
}
.mt25 {
  margin-top: 25px;
}
.mt30 {
  margin-top: 30px;
}
.mt35 {
  margin-top: 35px;
}
.mt40 {
  margin-top: 40px;
}
.mt45 {
  margin-top: 45px;
}
.mt70 {
  margin-top: 35px;
}
.row {
  position: relative;
}
.pointer {
  cursor: pointer;
}
.under {
  background: url('../../assets/under.png') no-repeat;
  background-size: contain;
  width: 130px;
  height: 130px;
  right: 180px;
  top: 0px;
  position: absolute;
  z-index: 10;
}
.modal {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 20;

  .buyer-tip {
    height: 434px;
    width: 470px;
    position: relative;
    top: calc(50% - 217px);
    left: calc(50% - 235px);

    .up {
      cursor: pointer;
      bottom: 6px;
      width: 100px;
      height: 100px;
      left: 186px;
      position: absolute;
    }

    .close {
      cursor: pointer;
      width: 30px;
      height: 30px;
      top: 118px;
      right: 4px;
      position: absolute;
    }
  }
}

</style>